﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格工具栏 -->
                <form class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">权限名称:</label>
                            <div class="layui-input-inline">
                                <input name="MenuName" class="layui-input" placeholder="输入权限名称" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单url:</label>
                            <div class="layui-input-inline">
                                <input name="MenuUrl" class="layui-input" placeholder="输入路由地址" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">权限标识:</label>
                            <div class="layui-input-inline">
                                <input name="Authorize" class="layui-input" placeholder="输入权限标识" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单状态:</label>
                            <div class="layui-input-inline">
                                <select name="MenuStatus" lay-verify="">
                                    <option value="">请选择</option>
                                    <option value="1">启用</option>
                                    <option value="2">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            &emsp;
                            <button type="button" class="layui-btn icon-btn" lay-filter="authoritiesTbSearch" perm-show="system:menu:search"
                                    lay-submit>
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>&nbsp;
                            <button type="button" id="authoritiesAddBtn" class="layui-btn icon-btn" perm-show="system:menu:add">
                                <i class="layui-icon">&#xe654;</i>添加
                            </button>
                        </div>
                    </div>
                </form>
                <!-- 数据表格 -->
                <table id="authoritiesTable"></table>
            </div>
        </div>
    </div>

    <!-- 表格操作列 -->
    <script type="text/html" id="authoritiesTbBar">
        <a perm-show="system:menu:edit" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a perm-show='system:menu:delete' class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

        {{#  if(d.MenuType == 3){ }}
        <a perm-show='system:menu:btnauths' class="layui-btn layui-btn-warm layui-btn-xs" lay-event="api">接口权限</a>
        {{#  } else { }}
        <a class="layui-btn layui-btn-disabled layui-btn-xs">接口权限</a>
        {{#  } }}
    </script>

    <!-- 表格操作列2 -->
    <script type="text/html" id="accessTbBar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <!-- 表格操作列3 -->
    <script type="text/html" id="accessTbBar2">
        <a class="layui-btn layui-btn-sm" lay-event="add">添加</a>
    </script>

    <!-- 表单弹窗 -->
    <script type="text/html" id="authoritiesEditDialog">
        <form id="authoritiesEditForm" lay-filter="authoritiesEditForm" class="layui-form model-form"
              style="padding-right: 20px;">
            <input name="authorityId" type="hidden" />
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">上级菜单</label>
                        <div class="layui-input-block">
                            <div id="authoritiesEditParentSel" class="ew-xmselect-tree"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">权限名称:</label>
                        <div class="layui-input-block">
                            <input name="MenuName" placeholder="请输入权限名称" class="layui-input"
                                   lay-verType="tips" lay-verify="required" required />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">权限类型:</label>
                        <div class="layui-input-block">
                            <select name="MenuType" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">目录</option>
                                <option value="2">页面</option>
                                <option value="3">按钮</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单图标:</label>
                        <div class="layui-input-block">
                            <input name="MenuIcon" id="MenuIcon" placeholder="请输入菜单图标" class="layui-input" lay-filter="MenuIcon" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">排序号:</label>
                        <div class="layui-input-block">
                            <input name="MenuSort" placeholder="请输入排序号" type="number" class="layui-input"
                                   lay-verType="tips" lay-verify="required|number" required />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-required">菜单状态:</label>
                        <div class="layui-input-block">
                            <select name="MenuStatus" lay-verify="required">
                                <option value="">请选择</option>
                                <option value="1">启用</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">权限标识:</label>
                        <div class="layui-input-block">
                            <input name="Authorize" placeholder="请输入权限标识" class="layui-input" autocomplete="off" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">菜单url:</label>
                        <div class="layui-input-block">
                            <input name="MenuUrl" placeholder="请输入菜单url" class="layui-input" autocomplete="off" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-filter="authoritiesEditSubmit" lay-submit>保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </form>
    </script>

    <!-- 接口权限弹窗 -->
    <script type="text/html" id="accessDialog">
        <form id="accesstForm" lay-filter="accessForm" class="layui-form model-form" style="padding: 10px;">
            <div class="layui-row">
                <blockquote class="layui-elem-quote">只有配置了权限的接口才会进行拦截校验</blockquote>
                <table id="accessTable" lay-filter="accessTable"></table>
            </div>
            <div class="layui-form-item text-right">
                <button class="layui-btn" lay-filter="accessSubmit" lay-submit>保存</button>
                <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            </div>
        </form>
    </script>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>
        layui.use(['layer', 'form', 'admin', 'treeTable', 'util', 'xmSelect', 'table', 'setter', 'iconPicker'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var admin = layui.admin;
            var treeTable = layui.treeTable;
            var util = layui.util;
            var xmSelect = layui.xmSelect;
            var table = layui.table;
            var setter = layui.setter;
            var iconPicker = layui.iconPicker;
            layuiTableSet();

            var tbDataList = [];

            // 渲染表格
            var insTb = treeTable.render({
                elem: '#authoritiesTable',
                tree: {
                    iconIndex: 1,
                    idName: 'Id',
                    pidName: 'ParentId',
                    isPidData: true
                },
                cols: [
                    {type: 'numbers'},
                    { field: 'MenuName', title: '权限名称', width: 260},
                    { title: '图标', templet: '<p><i class="{{d.MenuIcon}}"></i></p>', align: 'center', width: 80},
                    { field: 'MenuUrl', title: '菜单url'},
                    { field: 'Authorize', title: '权限标识'},
                    { field: 'MenuSort', title: '排序号', align: 'center', width: 80},
                    {
                        title: '类型', templet: function (d) {
                            var strs = [
                                '<span class="layui-badge layui-badge-blue">目录</span>',
                                '<span class="layui-badge layui-badge-green">页面</span>',
                                '<span class="layui-badge layui-badge-yellow">按钮</span>'
                            ];
                            return strs[d.MenuType - 1];
                        }, align: 'center', width: 80
                    },
                    { title: '创建时间', templet: '<p>{{layui.util.toDateString(d.CreateTime)}}</p>', align: 'center', width: 180 },
                    {
                        field: 'MenuStatus', title: '状态', width: 80, align: 'center', templet: function (d) {
                            if (d.MenuStatus == 1) {
                                return '<span class="layui-badge layui-badge-blue">启用</span>';
                            } else {
                                return '<span class="layui-badge layui-badge-red">禁用</span>';
                            }
                        }
                    },
                    { title: '操作', templet: '#authoritiesTbBar', singleLine: false, align: 'center', width: 200}
                ],
                reqData: function (data, callback) {
                    admin.req( '/SystemManage/Menu/GetListJson' , function (res) {
                        if (res.Tag == 1) {
                            tbDataList = res.Data;
                        } else {
                            tbDataList = [];
                        }
                        callback(tbDataList);
                    }, 'get');
                }
            });

            /* 表格操作列点击事件 */
            treeTable.on('tool(authoritiesTable)', function (obj) {

                if (obj.event === 'edit') { // 修改
                    showEditModel(obj.data);
                } else if (obj.event === 'del') { // 删除
                    doDel(obj);
                } else if (obj.event === 'api') { // 接口权限
                    showAccessTable(obj.data);
                }
            });

            /* 表格搜索 */
            form.on('submit(authoritiesTbSearch)', function (data) {
                doTbSearch(data.field, 'Id');
                return false;
            });

            /* 添加 */
            $('#authoritiesAddBtn').click(function () {
                showEditModel();
            });

            var ChangeId = 0;
            /* 显示表单弹窗 */
            function showEditModel(mData) {
                admin.open({
                    type: 1,
                    area: '600px',
                    title: (mData ? '修改' : '添加') + '权限',
                    content: $('#authoritiesEditDialog').html(),
                    success: function (layero, dIndex) {
                        // 回显表单数据
                        form.val('authoritiesEditForm', mData);
                        // 赋值Id
                        ChangeId = mData ? mData.Id : 0;
                        // 渲染图标选择器
                        iconPicker.render({
                            // 选择器，推荐使用input
                            elem: '#MenuIcon',
                            // 数据类型：fontClass/unicode，推荐使用fontClass
                            type: 'fontClass',
                            // 是否开启搜索：true/false
                            search: true,
                            // 是否开启分页
                            page: false,
                            // 点击回调
                            click: function (data) {
                                var iconf = data.icon.substring(0, 12);
                                if (iconf == 'layui-extend') {

                                }
                                $("#MenuIcon").val('layui-icon ' + data.icon);
                            },
                            // 渲染成功后的回调
                            success: function (d) {

                            }
                        });
                        // 表单提交事件
                        form.on('submit(authoritiesEditSubmit)', function (data) {
                            data.field.ParentId = insXmSel.getValue('valueStr');
                            data.field.Id = ChangeId;
                            var loadIndex = layer.load(2);
                            admin.req( '/SystemManage/Menu/SaveFormJson', data.field, function (res) {
                                layer.close(loadIndex);
                                if (res.Tag == 1) {
                                    layer.close(dIndex);
                                    layer.msg("操作成功", {icon: 1});
                                    insTb.refresh();
                                } else {
                                    layer.msg(res.Message, {icon: 2});
                                }
                            }, 'post');
                            return false;
                        });

                        // 渲染下拉树
                        var insXmSel = xmSelect.render({
                            el: '#authoritiesEditParentSel',
                            height: '300px',
                            data: insTb.options.data,
                            initValue: mData ? [mData.ParentId] : [],
                            model: {label: {type: 'text'}},
                            prop: {
                                name: 'MenuName',
                                value: 'Id'
                            },
                            radio: true,
                            clickClose: true,
                            filterable: true,
                            tree: {
                                show: true,
                                indent: 15,
                                strict: false,
                                expandedKeys: true
                            }
                        });
                        // 弹窗不出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
            }

        /* 删除 */
            function doDel(obj) {
                layer.confirm('确定要删除“' + obj.data.MenuName + '”权限吗？', {
                    skin: 'layui-layer-admin',
                    shade: .1
                }, function (i) {
                    layer.close(i);
                    var loadIndex = layer.load(2);
                    admin.req( '/SystemManage/Menu/DeleteFormJson', obj.data.Id , function (res) {
                        layer.close(loadIndex);
                        if (res.Tag == 1) {
                            layer.msg("操作成功", { icon: 1 });
                            insTb.refresh();
                        } else {
                            layer.msg(res.Message, { icon: 2 });
                        }
                    }, 'post');
                });
            }

            // 搜索表格数据
            function doTbSearch(field, idName) {
                var ids = [], isClear = true;
                for (var i = 0; i < tbDataList.length; i++) {
                    var item = tbDataList[i], flag = true;
                    for (var f in field) {
                        if (!field.hasOwnProperty(f)) continue;
                        if (!field[f]) continue;
                        isClear = false;
                        if (!item[f] || (item[f] + "").indexOf(field[f]) === -1) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) ids.push(item[idName]);
                }
                if (isClear) {
                    insTb.clearFilter();
                } else {
                    insTb.filterData(ids);
                }
            }

            /* 显示表单弹窗 */
            function showAccessTable(mData) {
                admin.open({
                    type: 1,
                    area: '600px',
                    title:'配置接口',
                    content: $('#accessDialog').html(),
                    success: function (layero, dIndex) {
                        admin.req('/SystemManage/Menu/GetAccessByMenu', { Authorize: mData.Authorize}, function (res) {
                            if (res.Tag != 1) {
                                layer.msg(res.Message, {icon:2});
                            }

                            table.render({
                                elem: '#accessTable',
                                data: res.Data,
                                page: false,
                                limit: 1000,
                                limits:[1000],
                                toolbar: "#accessTbBar2",
                                height: '400px',
                                cols: [[
                                    { field: 'Url', title: '接口路径', edit: 'text' },
                                    { title: '操作', templet: '#accessTbBar', align: 'center', width: 80 }
                                ]],
                                done: function () {

                                }
                            });

                            table.on('tool(accessTable)', function (obj) {
                                if (obj.event === 'del') {
                                    layer.confirm('真的删除么', function (index) {
                                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

                                        var data = table.cache.accessTable;
                                        table.reload('accessTable', { data: data });

                                        layer.close(index);
                                    });
                                }
                            });

                            /* 表格头工具栏点击事件 */
                            table.on('toolbar(accessTable)', function (obj) {
                                if (obj.event === 'add') { // 添加
                                    var data = table.cache.accessTable;
                                    data.push({ Url: '' });
                                    table.reload('accessTable', { data: data});
                                }
                            });

                            // 表单提交事件
                            form.on('submit(accessSubmit)', function (data) {
                                var loadIndex = layer.load(2);

                                var urls = table.cache.accessTable.map(function (d) {
                                    return d.Url;
                                });

                                admin.req('/SystemManage/Menu/SaveAccess', { Authorize: mData.Authorize, Urls: urls  }, function (res) {
                                    layer.close(loadIndex);
                                    if (res.Tag == 1) {
                                        layer.close(dIndex);
                                        layer.msg("操作成功", { icon: 1 });
                                    } else {
                                        layer.msg(res.Message, { icon: 2 });
                                    }
                                }, 'post');
                                return false;
                            });

                        }, 'get');

                        // 弹窗不出现滚动条
                        $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    }
                });
            }

            form.render('select');

        });
    </script>

</body>
</html>